<template>
	<picker mode="multiSelector" @change="changeDate" @columnchange="columnchange" :range="date"
		range-key="label" :value="selectedDate">
		<slot></slot>
	</picker>
</template>

<script>
	export default {
		props:['value'],
		data(){
			return {
				date: [
					[],
					[],
					[]
				],
				selectedDate: [0, 0, 0] // 选择的索引
			}
		},
		created() {
			let year = [];
			for (let i = 1400; i <= 2100; i++) {
				year.push({
					value: i,
					label: i + '年'
				});
			}
			
			console.log('year', year);
			
			// 将 year 数组赋值给 this.date 的第一个元素
			this.date[0] = year;
			
			// 初始化月和日
			this.date[1] = this.getMonths();
			this.date[2] = this.getDays(1400, 1);
			
			this.$forceUpdate()
			console.log(this.date);
			this.getDateInit()
			
		},
		methods:{
			getDateInit(){
				
				const [year,month,day] = this.getNowDate()
				let y = 0
				let m = 0
				let d = 0
				this.date[0].forEach((i,index)=>{
					if(i.value === year) {
						y = index
					}
				})
				console.log('y', y, this.date[0])
				this.date[1].forEach((i,index)=>{
					if(i.value === month) {
						m = index
					}
				})
				this.date[2].forEach((i,index)=>{
					if(i.value === day) {
						d = index
					}
				})
				this.selectedDate = [y,m,d]
			},
			getNowDate(){
				// 创建一个新的 Date 对象
				const now = new Date();
				
				// 获取当前年份
				const year = now.getFullYear();
				
				// 获取当前月份（注意：月份是从 0 开始的，所以需要加 1）
				const month = now.getMonth() + 1;
				
				// 获取当前日期
				const day = now.getDate();
				
				// 输出结果
				console.log(`当前日期是：${year}年${month}月${day}日`);
				
				return [year,month,day]
			},
			getDaysInMonth(year, month) {
				// 月份在 JavaScript 中是从 0 开始的，所以 1 表示 2 月
				return new Date(year, month + 1, 0).getDate();
			},
			getMonths() {
				let months = [];
				for (let i = 1; i <= 12; i++) {
					months.push({
						value: i,
						label: i + '月'
					});
				}
				return months;
			},
			getDays(year, month) {
				let days = [];
				let lastDay = new Date(year, month, 0).getDate();
				for (let i = 1; i <= lastDay; i++) {
					days.push({
						value: i,
						label: i + '日'
					});
				}
				return days;
			},
			pickerChange(e) {
				const index = e.detail.value;
				this.selectedDate = index;
				const selectedYear = this.date[0][index[0]].value.slice(0, 4); // 提取年份
				const selectedMonth = this.date[1][index[1]].value.slice(0, 2); // 提取月份
				this.date[2] = this.getDays(selectedYear, selectedMonth); // 更新日
			},
			columnchange(e) {
				console.log('e',e)
				this.selectedDate[e.detail.column] = e.detail.value
				let year = this.date[0][this.selectedDate[0]].value
				let month = this.date[1][this.selectedDate[1]].value
				this.date[2] = this.getDays(year, month);
				this.$forceUpdate()
			},
			changeDate(e){
				console.log('e', e)
				let year = this.date[0][this.selectedDate[0]].value
				let month = this.date[1][this.selectedDate[1]].value
				if(month < 10) {
					month = '0' + month
				}
				let day = this.date[2][this.selectedDate[2]].value
				this.$emit('input', `${year}-${month}-${day}`)
			}
		}
	}
</script>

<style lang="scss">
	
</style>